<template>
  <div class="container">
      <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark"><img src="@/assets/imgs/flight/img_1.png" style="width:1230px; height: 280px;"/></div></el-col>
  </el-row>
  <el-row>
    <el-col :span="24" style="text-align: left;">
          <div class="grid-content bg-purple-dark"><el-select v-model="selected"  placeholder="航班类型(国内/国际)" style="width:200px; margin-top:5px;">
         <el-option label="国内航班" value="2403"></el-option>
         <el-option label="国际航班" value="2401"></el-option>
   </el-select>
   <el-button type="primary" class="search-btn" @click="fetchData" style="margin-left:20px;">确认</el-button>
   </div>
   </el-col>
  </el-row>
      <div class="tableBar" style="margin-top:10px;">
    <el-input v-model="input1" placeholder="请输入始发站" style="width:200px;">
      <i class="el-input__icon el-icon-search" style="cursor: pointer" @click="init"></i>
    </el-input>
    <el-input v-model="input2" placeholder="终点站为:天津" disabled="disabled" style="width:200px; margin-left:10px;">
      <i class="el-input__icon el-icon-search" style="cursor: pointer" @click="init"></i>
    </el-input>
   <el-date-picker v-model="orderTime"
      clearable 
      value-format="yyyy-MM-dd HH:mm:ss"
      type="datetimerange"
      placeholder="选择日期"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']"
      style="width:400px; margin-left:10px;"
    ></el-date-picker>
    <el-button type="primary" class="search-btn" @click="init" style="margin-right:260px;" icon="el-icon-search">查询</el-button>
  </div>
    <el-table
      :data="tableData"
      stripe
      class="tableBox"
    >
  <el-table-column
    prop="flid"
    label="航班ID"
    align="center"
  ></el-table-column>
  <el-table-column
    prop="ffid"
    label="航班标识"
    align="center"
  ></el-table-column>
      <el-table-column
        prop="cfno"
        label="航班号"
    align="center"
      ></el-table-column>
      <el-table-column
        prop="startapcd"
        label="始发站"
    align="center"
      ></el-table-column>
      <el-table-column
        prop="startfptt"
        label="预计起飞时间"
    align="center"
  >
      </el-table-column>
  <el-table-column
    prop="endapcd"
    label="终点站"
    align="center"
  ></el-table-column>
  <el-table-column prop="endfplt" label="预计到达日期" align="center">
    
  </el-table-column>
      <el-table-column label="操作" width="160" align="center">
  <template #default="scope">
    <el-button type="info" plain size="small" @click="confirmTicket(scope.row)">购票</el-button>
  </template>
</el-table-column>
    </el-table>
    <el-pagination
      class="pageList"
      :page-sizes="[8, 16, 24, 32]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :current-page.sync="currentPage"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark">
      &nbsp;
      </div></el-col>
  </el-row>
  <el-row>
      <span style="font-size:20px;">攻略玩法</span>
    <el-col :span="24"><div class="grid-content bg-purple-dark"><img src="@/assets/imgs/flight/bottom2.png" style="width:1140px;"/>
      <br><br><br><br><br><br>
      </div></el-col>
  </el-row>
  </div>
 
</template>

<script setup>
import { ref } from 'vue';
import request from '@/utils/request';
import { ElMessageBox } from 'element-plus'; // 导入 ElMessageBox 组件
import { ElMessage } from 'element-plus';
const selected = ref('2403');
const input1 = ref('');
const input2 = ref('天津');
const orderTime = ref('');
const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(8);


const  fetchData = () => {
request({
  url: '/fquery/entermain',
  method: 'GET',
  params: {
    page: currentPage.value,
    pageSize: pageSize.value,
    startapat: selected.value,
  }
}).then(res => {
  if (res.data.errorCode == 200) {
    tableData.value = res.data.data.records; // 使用ref变量的值
    total.value = res.data.data.total; // 使用ref变量的值
  }
}).catch(error => {
  console.error('Error fetching data:', error);
});
};

const confirmTicket = (row) => {
  // 购票确认弹窗
  ElMessageBox.confirm('确认购买此航班的机票吗？', '购票确认', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 用户点击确认后的处理逻辑
    // 调用购票方法，并传递相应参数
    purchaseTicket(row);
  }).catch(() => {
    // 用户点击取消后的处理逻辑
  });
};

const purchaseTicket = (row) => {
  // 调用后端接口购买机票
  request({
    url: '/fquery/tickets/buy',
    method: 'POST',
    data: {
      cfno: row.cfno,
      startapcd: row.startapcd,
      startfptt: row.startfptt,
      endapcd: row.endapcd,
      endfplt: row.endfplt,
    },
  }).then((res) => {
    if (res.data.errorCode == 200) {
      // 购票成功的处理逻辑
      ElMessage.success('购票成功！');
      // 刷新页面或重新获取数据等操作
    } else {
      // 购票失败的处理逻辑
      ElMessage.error('购票失败，请重试！');
    }
  }).catch((error) => {
    console.error('Error purchasing ticket:', error);
    ElMessage.error('购票失败，请重试！');
  });
};

const handleSizeChange = (val) => {
  pageSize.value = val; // 使用ref变量的值
  fetchData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val; // 使用ref变量的值
  fetchData();
};

const addMemberHandle = (row) => {
  // 处理行数据的操作
};

fetchData();
</script>

<style scoped>
.tableBar {
display: flex;
align-items: center;
margin: 10px 0;
}
.container {
max-height: 100vh;
overflow-y: auto;
}
</style>